<template>
	<div class="login">
		<transition name="tabbar-fold">
			<div class="login_from" v-if="status == 0">

				<img class="logo" src="../../assets/logo.png" alt="">

				<input v-model="phone" placeholder="请输入账号/手机" type="text">
				<input v-model="pwd" placeholder="请输入登录密码" type="password">

				<button @click="login">
					登录
				</button>

				<div class="login_bottom">
					<span @click="status = 1">立即注册</span>
					<span @click="status = 2">忘记密码?</span>
				</div>
			</div>
		</transition>

		<transition name="fold-right">
			<div class="register_from" v-if="status == 1">
				<img @click="status = 0" class="back" src="../../assets/user/back.png" alt="">
				<div class="title">
					注册
				</div>

				<input v-model="user_login" placeholder="请输入昵称" type="text">
				<input v-model="phone" placeholder="账号/手机号登录" type="text">
				<div class="getcode">
					<input v-model="code" placeholder="请输入验证码" type="text">
					<div @click="getCode">{{code_text}}</div>
				</div>
				<input v-model="pwd" placeholder="请输入6-18位登录密码" type="password">
				<input v-model="jypwd" placeholder="请输入6位数字交易密码" type="password">
				<input v-model="tj_phone" placeholder="请输入好有邀请码" type="text">

				<button @click="register">立即注册</button>
			</div>
		</transition>


		<transition name="fold-left">
			<div class="register_from change_from" v-if="status == 2">
				<img @click="status = 0" class="back" src="../../assets/user/back.png" alt="">
				<div class="title">
					忘记密码
				</div>

				<input v-model="phone" placeholder="账号/手机号登录" type="text">
				<div class="getcode">
					<input v-model="code" placeholder="请输入验证码" type="text">
					<div @click="getCode">{{code_text}}</div>
				</div>
				<input v-model="pwd" placeholder="请输入6-18位新密码" type="password">
				<input v-model="pwd2" placeholder="请再次输入新密码" type="password">

				<button class="change_pwd" @click="changePwd">确认修改</button>
			</div>
		</transition>
	</div>
</template>

<script>
	export default {
		name: 'login',
		created() {
			
			if(this.$route.query.phone){
				
				this.tj_phone = this.$route.query.phone
				
				this.status = 1
				
			}
		},
		data() {
			return {
				//昵称
				user_login: "",

				//账号
				phone: "",

				//验证码
				code: "",

				//密码
				pwd: "",

				//重复新密码
				pwd2: "",
				
				//交易密码
				jypwd:"",

				//推荐码
				tj_phone: "",

				//0 登录  1注册  2忘记密码
				status: 0,

				//true 能发验证码  false 不能发
				code_status: true,

				code_text: "获取验证码"
			}
		},
		methods: {
			//获取验证码
			async getCode() {

				if (!this.code_status) {
					return
				}

				if (/^1[3456789]\d{9}$/.test(this.phone) != true) return this.$toast("请输入正确的手机号码！");

				let post_data = {
					phone: this.phone,
				}

				this.code_status = false

				try {

					const data = await this.$apis.User.sendRegVerify(post_data)

					this.$toast(data.msg)

					let count = 60

					setInterval(() => {

						count--
						this.code_text = count + 'S后重发'

						if (count <= 0) {
							this.code_text = "获取验证码"
							this.code_status = true
						}

					}, 1000)


				} catch (e) {

					this.$toast(e.msg)

					this.code_status = true

				}

			},

			//登录
			async login() {

				if (/^1[3456789]\d{9}$/.test(this.phone) != true) return this.$toast("请输入正确的手机号码！");

				if (this.pwd.trim().length < 6 || this.pwd.trim().length > 18) return this.$toast("请输入正确的登录密码！");

				let post_data = {
					phone: this.phone,
					pwd: this.pwd
				}

				try {

					const data = await this.$apis.User.login(post_data)
					
					this.$toast(data.msg)
					
					this.$router.push('/')

				} catch (e) {

					this.$toast(e.msg)
					//TODO handle the exception
				}

			},

			//注册
			async register() {

				if (this.user_login.trim().length < 2 || this.user_login.trim().length > 16) return this.$toast("请输入正确的昵称！");

				if (/^1[3456789]\d{9}$/.test(this.phone) != true) return this.$toast("请输入正确的手机号码！");

				if (this.code.trim().length < 4 || this.code.trim().length > 6) return this.$toast("请输入正确的验证码！");
				
				if (this.pwd.trim().length < 6 || this.pwd.trim().length > 18) return this.$toast("请输入正确的注册密码！");
				
				if (this.jypwd.trim().length != 6) return this.$toast("请输入正确的交易密码！");
				
				if (/^1[3456789]\d{9}$/.test(this.tj_phone) != true) return this.$toast("邀请码有误！");
				
				let post_data = {
					user_login: this.user_login,
					phone:this.phone,
					code:this.code,
					pwd:this.pwd,
					jypwd:this.jypwd,
					tj_phone:this.tj_phone
				}

				try {

					const data = await this.$apis.User.register(post_data)
					
					this.$toast(data.msg)
					
					this.status = 0
					
				} catch (e) {
					
					this.$toast(e.msg)
					//TODO handle the exception
				}

			},
			
			//忘记密码
			async changePwd(){
				
				if (/^1[3456789]\d{9}$/.test(this.phone) != true) return this.$toast("请输入正确的手机号码！");
				
				if (this.code.trim().length < 4 || this.code.trim().length > 6) return this.$toast("请输入正确的验证码！");
				
				if (this.pwd.trim().length < 6 || this.pwd.trim().length > 18) return this.$toast("请输入正确格式的密码！");
				
				if (this.pwd2 != this.pwd) return this.$toast("重复密码请与密码一致!");
				
				let post_data = {
					phone:this.phone,
					code:this.code,
					pwd:this.pwd,
					pwd2:this.pwd2,
				}
				
				try{
					
					const data = await this.$apis.User.loginPassword(post_data)
					
					this.$toast(data.msg)
					
					this.status = 0
					
				}catch(e){
					
					this.$toast(e.msg)
					//TODO handle the exception
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.login {
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: url(../../assets/user/login_bg.png);
		background-size: cover;

		button {
			color: #94E9FF;
			height: .77rem;
			font-size: .28rem;
			width: 100%;
			text-align: center;
			line-height: .77rem;
			opacity: .9;
			border-radius: .2rem;
			border: none;
			background: #11223A;
			box-shadow: inset 0px 0px .3rem 0px rgba(28, 176, 212, .8);
		}

		input {
			width: 100%;
			height: .77rem;
			display: block;
			color: #94E9FF;
			font-size: .28rem;
			box-sizing: border-box;
			padding-left: .54rem;
			border-radius: .2rem;
			border: 1px solid rgba(148, 233, 255, .4);
		}

		.login_from {
			box-sizing: border-box;
			position: absolute;
			height: 100%;
			width: 100%;
			padding: 0 .96rem;
			margin: auto;

			.logo {
				display: block;
				margin: auto;
				margin-top: 2.41rem;
				margin-bottom: 1.1rem;
				width: 1.75rem;
				height: 1.75rem;
			}

			>input:nth-child(2) {
				margin-bottom: .64rem;
			}

			input::placeholder {
				color: #94E9FF;
			}

			button {
				margin-top: 2.53rem;
			}

			.login_bottom {
				display: flex;
				color: #94E9FF;
				font-size: .24rem;
				justify-content: space-between;
				margin-top: .31rem;
			}
		}

		.register_from {
			box-sizing: border-box;
			position: absolute;
			width: 100%;
			padding: 0 .96rem;
			// width: 5.58rem;
			margin: auto;

			.back {
				width: .49rem;
				height: .43rem;
				position: absolute;
				top: .9rem;
				left: .63rem;
			}

			.title {
				font-size: .43rem;
				margin-top: 1.85rem;
				margin-bottom: 1rem;
				background: linear-gradient(0deg, rgba(28, 206, 244, 1) 0%, rgba(0, 254, 202, 1) 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			input::placeholder {
				color: #94E9FF;
			}

			input {
				margin-bottom: .46rem;
				width: 100%;
				display: block;
				height: .77rem;
				font-size: .28rem;
				color: #94E9FF;
				box-sizing: border-box;
				padding-left: .54rem;
				border-radius: .2rem;
				border: 1px solid rgba(148, 233, 255, .4);
			}

			.getcode {
				margin-bottom: .46rem;
				display: flex;
				align-items: center;
				justify-content: space-between;

				input {
					margin-bottom: 0;
					width: 3.73rem;
				}

				div {
					text-align: center;
					line-height: .78rem;
					font-size: .24rem;
					width: 1.71rem;
					height: .78rem;
					background: linear-gradient(0deg, rgba(28, 206, 244, 1) 0%, rgba(0, 254, 202, 1) 100%);
					border-radius: .2rem;
				}

				button {
					margin-top: 1rem;
				}

			}

			.change_pwd {
				margin-top: 1.96rem;
			}
		}

		.change_from {
			input {
				margin-bottom: .49rem;
			}

			>input:nth-last-child(2) {
				margin-bottom: 0;
			}
		}
	}
</style>
